{extend name="public/common"/}
{block name="head"}
<style>
    body {
        background-color: #fff;
    }

    .aui-bar-nav a {
        color: #fff;
    }

    .login-third {
        margin-top: 3rem;
    }

    .login-img {
        margin-top: 1em;
        height: 5em;
        -moz-border-radius: 5em;
        /*-webkit-border-radius: 5em;
        border-radius: 5em;*/
    }

    .aui-list-item-label-icon {
        padding-right: 0.1rem;
        max-width: 100%;
    }

    .aui-list .aui-list-item-label-icon {
        width: auto;
        padding-right: 0rem;
    }

    img {
        display: inline;
    }

    .aui-list .aui-list-item {
        padding-left: 0;
    }
</style>
{/block}
{block name="header"}
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" href="javascript:history.go(-1);">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">登录</div>
    <a class="aui-pull-right">
        <span class="aui-iconfont aui-icon-question"></span>
    </a>
</header>
{/block}
{block name="body"}
<section class="aui-content aui-margin-t-15 " style="text-align: center; margin-bottom: 2rem;">
    <img class="login-img" src="__IMG__/ren.png" style="display:initial;">
</section>
<section class="aui-content aui-margin-t-15 login-box">
    <ul class="aui-list aui-form-list">
        <li class="aui-list-item" style="border-top:0 solid #eee;">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label" style="width:5rem;font-weight:800;">&emsp;账&emsp;号：</div>
                <div class="aui-list-item-input" style="width:10rem;">
                    <input type="number" v-model="mobile" placeholder="输入注册手机号">
                </div>
                <div class="aui-list-item-label-icon" style="width:5rem;">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label" style="width:5rem;font-weight:800;">&emsp;密&emsp;码：</div>
                <div class="aui-list-item-input" style="width:10rem;">
                    <input type="password" v-model="password" placeholder="账户密码">
                </div>

                <a class="aui-list-item-label-icon" style="width:5rem;font-size:0.6rem"
                   href="{:url('m1obile/Foreign/forget')}">
                    忘记密码?
                </a>
            </div>
        </li>
    </ul>
</section>
<section class="aui-content-padded aui-margin-t-15">
    <div  class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" onclick="loginBt()">登录</div>
</section>

<div class="aui-font-size-16" style="margin-top: 1.2rem;">
    <div class="aui-info-item" style="text-align:center;display: block;">还没有账号，
        <a style="display: -webkit-inline-box;font-weight:800;" href="{:url('mobile/Foreign/register')}">免费注册</a>
    </div>
</div>
<section class="aui-content-padded login-third">
    <p class="aui-font-size-12 aui-text-center aui-margin-b-15">第三方登录</p>
    <div class="aui-grid" style="background: none;">
        <div class="aui-row">
            <a class="aui-col-xs-4 aui-invisible" style="text-align: right;padding-right:0.6rem;">
                <img src="__IMG__/share/iconfont-qq.png" style="padding: 0.1rem;" width="50">
            </a>
            <a class="aui-col-xs-4" style="text-align: center;" href="{:url('mobile/Foreign/wxLogin')}">
                <img src="__IMG__/share/iconfont-weixin.png" width="50">
            </a>
            <a class="aui-col-xs-4  aui-invisible" style="text-align: left;">
                <img src="__IMG__/share/iconfont-weibo.png" style="padding: 0.1rem;margin-left:0.5rem" width="50">
            </a>
        </div>
    </div>
</section>

{/block}
{block name="script"}

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

<script type="text/javascript">

    function loginBt(){
        if (!register_dom.mobile) {
            toast.fail({
                title: '请填写手机号',
                duration: 2000
            });
            return;
        }
        if (!register_dom.password) {
            toast.fail({
                title: '请填写密码',
                duration: 2000
            });
            return;
        }
        if({:config('setting.tencent_captcha_open')})
        {
            var captcha1 = new TencentCaptcha("{:config('setting.tencent_captcha_appid')}", function(res) {
                if (res.ret === 0) {
                    login(res);
                }
            });
            captcha1.show(); // 显示验证码
        }else{
            login({});
        }
    };

    var register_dom = new Vue({
        el: '.login-box',
        data: {
            password: "",
            mobile: "{$user.mobile|default=''}",
        },
        methods: {},
        //更新
        updated: function () {
            console.log();
        }
    });

    // 密码框更改
    function changePwd() {
        if ('password' == $api.attr($api.dom("#password"), 'type')) {
            $api.attr($api.dom("#password"), 'type', 'text');
        } else {
            $api.attr($api.dom("#password"), 'type', 'password');
        }
    }

    function login(res) {
        res['account'] = register_dom.mobile;
        res['password'] = register_dom.password;
        toast.loading({
            title: "登录请求中",
            duration: 2000
        }, function (ret) {
            console.log(ret);
        });
        $.ajax({
            type: 'post',
            url: "{:url('ucenter/Foreign/login',['module'=>'mobile'])}",
            data: res,
            dataType: 'json',
            timeout: 3000,
            success: function (data) {
                toast.hide();
                if (0 == data.code) {
                    location.href = "{:url('mobile/User/index')}";
                } else {
                    changePwd();
                    toast.fail({
                        title: data.message,
                        duration: 2000
                    });
                }
            },
            error: function (xhr, type) {
                toast.fail({
                    title: type,
                    duration: 2000
                });
                toast.hide();
            }
        })
    };


</script>

{/block}
{block name="footer"}
{/block}